<template>
  <div>
    <h2>组合API-setup方法用法</h2>
    <hr>
    <div>{{msg}}</div>
    <button @click='handleClick'>点击</button>
  </div>
</template>
<script>
export default {
  name: 'App',
  // data () {
  //   return {
  //     msg: 'hello'
  //   }
  // },
  setup () {
    // 该函数的执行时机：beforeCreate之前
    // Vue3中已经不存在 beforeCreate和created 生命周期了（被setup替代了）

    // setup函数中不可以访问this,因为此时组件尚未创建（实例化）
    // console.log(this)

    // setup中通过return的方式向模板提供数据
    const msg = 'nihao'
    const handleClick = () => {
      console.log(msg)
    }
    return {
      msg,
      handleClick
    }
  }
}
</script>
